<template>
    <div class="dialog" :style="dialogStyle">
        <div class="label">
            <!-- <div class="left-img"></div> -->
            <div class="title">详情</div>
            <button class="close-btn" @click="close">&times;</button>
            <!-- 使用 × 符号作为关闭按钮 -->
        </div>
        <div class="content">
            <div class="time-picker">
                <span class="timeLabel">时间选择:</span>
                <el-date-picker
                    v-model="timeValue"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                ></el-date-picker>
            
                <el-form
                :inline="true"
                :model="formInline"
                class="demo-form-inline"
                style="display: flex"
            >
                <span class="areaLabel">流域选择:</span>
                <el-select v-model="fAValue" placeholder="请选择">
                    <el-option
                        v-for="item in flowAreaValue"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
           
        </el-form>
    </div>
            <el-form
                :inline="true"
                :model="formInline"
                class="demo-form-inline"
                style="display: flex"
            >
                <span class="areaLabel">行政区:</span>
                <el-select  v-model="aValue" placeholder="请选择">
                    <el-option
                        v-for="item in areaValue"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
                <el-form-item label="请输入">
                    <el-input
                        v-model="staName"
                        placeholder="请输入站名"
                        style="width: 300px"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSearch" icon="el-icon-search">
                        查询
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="exportform" icon="el-icon-download">
                        导出
                    </el-button>
                </el-form-item>
            </el-form>
            <div class="tableContent">
            <table id="dataTable" class="dataTable" border="1" style="width: 100%; text-align: center; font-size: 13px; overflow:auto;height:20px !important;">
    
    <thead
        style="
            background: rgba(0, 35, 71, 0.6);
            color: #fff;
            font-size: 18px;
            height: 3rem;
        "
    >
        <tr>
            <th style="width: 100px">流域</th>
            <th style="width: 140px">行政区</th>
            <th style="width: 100px">河名</th>
            <th style="width: 100px">站名</th>
            <th style="width: 130px">水位(mm)</th>
            <th style="width: 130px">流量(m³/s)</th>
            <th style="width: 100px">保证水位</th>
            <th style="width: 130px">警戒水位(m)</th>
            <th style="width: 130px">时间</th>
        </tr>
    </thead>
    <tbody style="border: 1px solid #ccc; overflow:auto;height:1rem !important;">
        <tr class="table-row" v-for="(row, index) in tableData" :key="index">
            <td>{{ row.bsnm }}</td>
            <td>{{ row.addvcd }}</td>
            <td>{{ row.rvnm }}</td>
            <td>{{ row.stnm }}</td>
            <td>{{ row.smallscalewaterstatus }}</td>
            <td>{{ row.smallscaleflow }}</td>
            <td>{{ row.warningwaterstatus }}</td>
            <td>{{ row.superwarningwaterstatus }}</td>
            <td>{{ row.latestobservetime }}</td>
        </tr>
    </tbody>
</table>
</div> 
        </div>
    </div>
</template>

<script>
import { getRiverDetails,getRiverArea,getReservoirArea } from '@/api/zhjcleft';
import * as XLSX from 'xlsx';
import * as FileSaver from "file-saver";
export default {
    name: 'DetailsDialog',
    props: {
        dialogStyle: {
            type: Object,
            default: () => ({
                position: 'fixed',
                top: '25%', // 设置弹窗顶部距离视口顶部的距离
                left: '53%', // 设置弹窗左边距离视口左边的距离
                transform: 'translateX(-50%)', // 水平居中
                zIndex: 500000, // 确保弹窗在最前面
            }),
        },
       
      
        hdShow: Boolean,
    },
    data() {
        return {
            formInline: {
                user: '',
                region: '',
            },
            areaData:null,
            fAValue:'',
            aValue: '',
            flowAreaValue: [],
            areaValue: [],
            riverFlowAreaValue: [
                {
                    label: '海河',
                    value: '海河',
                },
            ],
            riverAreaValue: [
                {
                    label: '乌鲁木齐',
                    value: '乌鲁木齐',
                },
                {
                    label: '天山地区',
                    value: '天山地区',
                },
                {
                    label: '哈密市',
                    value: '哈密市',
                },
                {
                    label: '伊犁地区',
                    value: '伊犁地区',
                },
                {
                    label: '额尔齐斯',
                    value: '额尔齐斯',
                },
                {
                    label: '克拉玛依',
                    value: '克拉玛依',
                },
                {
                    label: '塔里木盆地',
                    value: '塔里木盆地',
                },
                {
                    label: '昆仑山地区',
                    value: '昆仑山地区',
                },
                {
                    label: '巴音郭楞',
                    value: '巴音郭楞',
                },
                {
                    label: '木垒哈萨克',
                    value: '木垒哈萨克',
                },
            ],
            reservoirFlowAreaValue: [
                {
                    label: '喀什地区',
                    value: '喀什地区',
                },
                {
                    label: '巴州',
                    value: '巴州',
                },
                {
                    label: '和田地区',
                    value: '和田地区',
                },
                {
                    label: '阿克苏地区',
                    value: '阿克苏地区',
                },
                {
                    label: '克州',
                    value: '克州',
                },
                {
                    label: '昌吉州',
                    value: '昌吉州',
                },
                {
                    label: '阿勒泰地区',
                    value: '阿勒泰地区',
                },
            ],
            reservoirAreaValue: [
                {
                    label: '塔什库尔干塔吉克自治县',
                    value: '塔什库尔干塔吉克自治县',
                },
                {
                    label: '莎车县',
                    value: '莎车县',
                },
                {
                    label: '尉犁县',
                    value: '尉犁县',
                },
                {
                    label: '库尔勒市',
                    value: '库尔勒市',
                },
                {
                    label: '策勒县',
                    value: '策勒县',
                },
                {
                    label: '拜城县',
                    value: '拜城县',
                },
                {
                    label: '和田县',
                    value: '和田县',
                },
            ],
            detailsData: [],
            staName: "",
            tableData: {},
            
            timeValue: [new Date(2000, 10, 10, 10, 10), new Date(2024, 10, 11, 10, 10)],
            searchDetails: {},
        };
    },
  
    methods: {
        getRowClassName({ row, rowIndex }) {
            return 'custom-row-hover';
        },
       async  getAreaData(){
            console.log('111111111111111111');
            
            if (this.hdShow) {
          await getRiverArea().then((res) => {
            this.areaData = res.data;
            console.log(res.data, "res.data1");
            this.riverFlowAreaValue = this.areaData.bsnm.map(item => ({
            label: item,
            value: item
        }));
        this.riverAreaValue = this.areaData.addvcd.map(item => ({
            label: item,
            value: item,
          }));
          });
         
          this.flowAreaValue = this.riverFlowAreaValue;
          this.areaValue = this.riverAreaValue;
        } else {
          await getReservoirArea().then((res) => {
            this.areaData = res.data;
            console.log(res.data, "res.data2");
            this.reservoirFlowAreaValue = this.areaData.cities.map(item => ({
            label: item,
            value: item
        }));
        this.reservoirAreaValue = this.areaData.counties.map(item => ({
            label: item,
            value: item,
          }));
          });
          this.flowAreaValue = this.reservoirFlowAreaValue;
            this.areaValue = this.reservoirAreaValue;
        }
        },
        exportform() {
            if (this.tableData.length === 0) {
                this.$message.warning("暂无可导出的数据!");
                return;
            }
            let tables = document.getElementById("dataTable").cloneNode(true);
            let table_book = XLSX.utils.table_to_book(tables);
            let table_write = XLSX.write(table_book, {
                bookType: "xlsx",
                bookSST: true,
                type: "array",
            });
            try {
                FileSaver.saveAs(
                    new Blob([table_write], { type: "application/octet-stream" }),
                    `站点信息表.xlsx`
                );
            } catch (e) {
                if (typeof console !== "undefined") console.log(e, table_write);
            }
        },
        close() {
            this.$emit('close');
        },
        onSearch() {
            this.searchDetails.startTime = this.formatDate(this.timeValue[0]);
            this.searchDetails.endTime = this.formatDate(this.timeValue[1]);
            this.searchDetails.bsnm = this.fAValue;
            this.searchDetails.stnm = this.staName;
            this.searchDetails.addvcd = this.aValue;
            console.log(this.searchDetails, '搜索条件');
            getRiverDetails(this.searchDetails).then(res => {
                console.log(res, '详情');
                this.tableData = res.data;
            });
        },
        formatDate(date) {
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的
            const day = date.getDate().toString().padStart(2, '0');
            const hours = date.getHours().toString().padStart(2, '0');
            const minutes = date.getMinutes().toString().padStart(2, '0');
            const seconds = date.getSeconds().toString().padStart(2, '0');

            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
    },
    mounted() {
        this.getAreaData();
    },
};
</script>

<style scoped lang="scss">
span {
    margin: 0 1rem;
}
.dialog {
    border: 1px solid #ccc;
    // padding: 20px;
    width: 50vw;
    height: 40vh;
    font-size: 0.8rem;
    color: white;
    // overflow: auto; 
    // background-color: white;
    // position: relative; /* 确保子元素的绝对定位是基于这个容器 */
    .label {
        width: 100%;
        height: 10%;
        background-color: rgba(0, 35, 71, 0.6);
        display: flex;
        .left-img {
            width: 10%;
            height: 100%;
            border: 1px solid black;
        }
        .title {
            margin-left: 1rem;
            line-height: 250%;
        }
    }
    .content {
        width: 100%;
        height: 90%;
        background-color: rgba(0, 35, 71, 0.7);
        margin-top: 5.4%;
        // overflow:auto;
        .time-picker {
            padding: 1rem 0;
            display: flex;
        }
        .tableContent{
            width: 100%;
            height: 60%;
            overflow: auto;
        .dataTable {
            width: 100%;
            height: 60%;
            max-height: 300px;
            overflow-y: auto;
        }}
        .areaLabel {
            padding: 0.5rem 0;
            // display:flex;
            // align-items: center;
        }
    }
}

.close-btn {
    position: absolute; /* 绝对定位 */
    top: 2%;
    right: 1%;
    border: none;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
    color: white;
}
.el-form--inline .el-form-item__label {
    margin-left: 1rem;
}
.close-btn:hover {
    color: #409eff; /* 鼠标悬停时改变颜色 */
}
::v-deep .el-input__inner {
    background-color: #3c6484;
    color: white;
}
::v-deep .el-button--primary {
    height: 70%;
    background-color: #3c6484;
}
::v-deep .el-range-editor .el-range-input {
    // line-height: 1;
    background-color: #3c6484;
    color: white;
}
::v-deep .el-date-editor .el-range-separator {
    color: white;
}
::v-deep.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
    // border-bottom: 1px solid #EBEEF5;
    background-color: #3c6484;
    color: white;
}
// ::v-deep.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf:hover {
//     // border-bottom: 1px solid #EBEEF5;
//     background-color: black;
//     color:white;
// }
::v-deep.el-table tr {
    background-color: transparent;
}
::v-deep.el-table tr:hover {
    background-color: #66b1ff !important;
}
::v-deep .el-table__row:hover {
    background-color: #66b1ff !important;
}
::v-deep .el-table {
    background-color: transparent;
}
.custom-row-hover:hover {
    background-color: #66b1ff !important;
}
.table-row:hover {
    background-color: #66b1ff !important;
}
</style>
